<template>
    <el-card style="max-width: 100%">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">养殖信息</span>
                <el-button style="margin-left: 16px" @click="dialogVisible = true">
                    设置
                </el-button>
            </div>
            <el-descriptions title="" style="margin-top: 20px;">
                <el-descriptions-item label="品种:" span="2">{{ formclu.breed }}</el-descriptions-item>
                <el-descriptions-item label="来源:">{{ formclu.source }}</el-descriptions-item>
                <el-descriptions-item label="饲养天数:" span="2">{{ formclu.feeding }}</el-descriptions-item>
                <el-descriptions-item label="饲料品牌:">{{ formclu.brand }}</el-descriptions-item>
                <el-descriptions-item label="饲料负责人:" span="2">{{ formclu.principal }}</el-descriptions-item>
                <el-descriptions-item label="出栏日期:">{{ formclu.publicationDate.substring(0, 10)
                    }}</el-descriptions-item>
            </el-descriptions>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">保健信息</span>
                <el-button style="margin-left: 16px" @click="addhealth()">
                    新增行
                </el-button>
            </div>
            <table id="myTable">
                <thead>
                    <tr>
                        <th>饲养天数</th>
                        <th>保健方式</th>
                        <th>保健方法</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in  healthlist " :key="item.id">
                        <td><el-input style="width:100px" v-model="item.feedingDays"
                                @change="updatehealsh(item.id, item.feedingDays, item.healthCareMode, item.healthCareMethod)" />
                        </td>
                        <td><el-input style="width:100px" v-model="item.healthCareMode"
                                @change="updatehealsh(item.id, item.feedingDays, item.healthCareMode, item.healthCareMethod)" />
                        </td>
                        <td><el-input style="width:100px" v-model="item.healthCareMethod"
                                @change="updatehealsh(item.id, item.feedingDays, item.healthCareMode, item.healthCareMethod)" />
                        </td>
                        <td>
                            <el-button type="danger" plain size="small" @click="delhealth(item.id)">删除</el-button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">动检证</span>
            </div>
            <el-upload :on-success="Cjimg1" v-model:file-list="imagesList1" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible1">
                <img w-full :src="dialogImageUrl1" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">企业信息</span>
                <el-button style="margin-left: 16px" @click="Corsabled = true">
                    设置
                </el-button>
            </div>
            <el-descriptions title="" style="margin-top: 20px;">
                <el-descriptions-item label="养殖场:" span="2">{{ Cormodel.breedingPlant }}</el-descriptions-item>
                <el-descriptions-item label="负责人:">{{ Cormodel.factoryName }}</el-descriptions-item>
                <el-descriptions-item label="存栏数量:" span="2">{{ Cormodel.quantity }}</el-descriptions-item>
            </el-descriptions>
        </template>
    </el-card>
    <el-card style="max-width: 100%;margin-top: 10px">
        <template #header>
            <div class="card-header">
                <span style="color:cornflowerblue;font-size: 17px;">企业照片</span>
            </div>
            <el-upload :on-success="Cjimg2" v-model:file-list="imagesList2" limit="9" multiple
                action="http://localhost:44228/api/Goods/UploadFile" list-type="picture-card"
                :on-preview="handlePictureCardPreview2" :on-remove="handleRemove">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>
            <el-dialog v-model="dialogVisible2">
                <img w-full :src="dialogImageUrl2" alt="Preview Image" />
            </el-dialog>
        </template>
    </el-card>
    <!-- 弹框添加 -->
    <div>
        <el-dialog v-model="dialogVisible" title="养殖信息" width="500">
            <el-form :model="formclu" label-width="auto" style="max-width: 600px">
                <el-form-item label="品种:">
                    <el-input v-model="formclu.breed" />
                </el-form-item>
                <el-form-item label="来源:">
                    <el-input v-model="formclu.source" />
                </el-form-item>
                <el-form-item label="饲养天数:">
                    <el-input v-model="formclu.feeding" />
                </el-form-item>
                <el-form-item label="饲料品牌:">
                    <el-input v-model="formclu.brand" />
                </el-form-item>
                <el-form-item label="饲料负责人:">
                    <el-input v-model="formclu.principal" />
                </el-form-item>
                <el-form-item label="出栏日期:">
                    <el-date-picker v-model="formclu.publicationDate" type="date" placeholder="请输入日期"
                        style="width: 100%" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addclu()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <!-- qiyexinxi  -->
        <el-dialog v-model="Corsabled" title="企业信息" width="500">
            <el-form :model="Cormodel" label-width="auto" style="max-width: 600px">
                <el-form-item label="养殖场:">
                    <el-input v-model="Cormodel.breedingPlant" />
                </el-form-item>
                <el-form-item label="负责人:">
                    <el-input v-model="Cormodel.factoryName" />
                </el-form-item>
                <el-form-item label="存栏数量(只):">
                    <el-input v-model="Cormodel.quantity" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="Corsabled = false">取消</el-button>
                    <el-button type="primary" @click="addCor()">
                        添加
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>


</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
//上传图片变量
const files = "http://localhost:44228/Image/"
//养殖
const dialogVisible = ref(false)
const route = useRoute()
//反填养殖信息
const getclu = () => {
    axios.get('Foot/CultureManage?batchId=' + route.query.productionLot).then(res => {
        formclu.batchId = route.query.productionLot
        formclu.breed = res.data.data.breed
        formclu.certificate = res.data.data.certificate
        formclu.farmId = res.data.data.farmId
        formclu.breed = res.data.data.breed
        formclu.source = res.data.data.source
        formclu.feeding = res.data.data.feeding
        formclu.brand = res.data.data.brand
        formclu.principal = res.data.data.principal
        formclu.publicationDate = res.data.data.publicationDate
    })
}
console.log(route.query.productionLot)
const formclu = reactive({
    batchId: route.query.productionLot,
    certificate: "",
    farmId: 0,
    breed: "",
    source: "",
    feeding: 0,
    brand: "",
    principal: "",
    publicationDate: "0000-00-00"
})
//添加
const addclu = () => {
    axios.post('Foot/CultureAdd', formclu).then(res => {
        if (res.data.data == 1) {
            ElMessage({
                message: '保存成功',
                type: 'success',
            })

            dialogVisible.value = false;
        } else {
            ElMessage({
                message: '保存失败',
                type: 'error',
            })
        }
    })
}
//保健信息
const healthlist = ref([])
const gethealth = () => {
    axios.get('Foot/GetHealth?batchId=' + route.query.productionLot).then(res => {
        healthlist.value = res.data.data
        console.log(res.data.data)
    })
}
//添加行
const addhealth = () => {
    const healthmodel = reactive({
        batchId: route.query.productionLot,
        feedingDays: "",
        healthCareMode: "",
        healthCareMethod: ""
    })
    axios.post('Foot/AddHealth', healthmodel).then(res => {
        if (res.data.data == 1) {
            gethealth()
        } else {
            ElMessage({
                message: '操作失败',
                type: 'error',
            })
        }
    })
}
//删除保健行数据
const delhealth = (id: number) => {
    ElMessageBox.confirm(
        '确定要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            axios.get('Foot/DelHealth?id=' + id).then(res => {
                if (res.data.data == 1) {
                    ElMessage({
                        message: '删除成功',
                        type: 'success',
                    })
                    gethealth()
                } else {
                    ElMessage({
                        message: '操作失败',
                        type: 'error',
                    })
                }
            })
        })
}
//修改信息
const updatehealsh = (id: number, feedingDays: string, healthCareMode: string, healthCareMethod: string) => {
    const healthmodel = reactive({
        id: id,
        batchId: route.query.productionLot,
        feedingDays: feedingDays,
        healthCareMode: healthCareMode,
        healthCareMethod: healthCareMethod
    })
    axios.post('Foot/UpdateHealth', healthmodel).then(res => {
        if (res.data.data == 1) {
            gethealth()
        } else {
            ElMessage({
                message: '操作失败',
                type: 'error',
            })
        }
    })
}
//动检证
const dialogVisible1 = ref(false)
const dialogImageUrl1 = ref('')
const imagesList1 = ref([])
const Getimages1 = () => {
    axios.get("Goods/GetImage1?traceType=" + route.query.id)
        .then(res => {
            imagesList1.value = res.data.data;
            imagesList1.value.forEach(item => {
                item.url = files + item.value;
                console.log(item.value)
            })
        })
        .catch(error => {
            console.log(error)
        })
}
const handleRemove = (uploadFile: any) => {
    var id = uploadFile.name
    axios.get("Goods/DelImages?id=" + id)
        .then(res => {
        })
}

const handlePictureCardPreview = (uploadFile: any) => {
    dialogImageUrl1.value = uploadFile.url!
    dialogVisible1.value = true
}
//添加
const Cjimg1 = (value: any) => {
    var AddCjImages = reactive({
        traceType: route.query.id,
        urlImg: value.data,
        imageType: 1
    })
    axios.post("Goods/AddImages", AddCjImages)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Getimages1();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//企业照片
const dialogVisible2 = ref(false)
const dialogImageUrl2 = ref('')
const imagesList2 = ref([])
const Getimages2 = () => {
    axios.get("Goods/GetImage2?traceType=" + route.query.id)
        .then(res => {
            imagesList2.value = res.data.data;
            imagesList2.value.forEach(item => {
                item.url = files + item.value;
                console.log(item.value)
            })
        })
        .catch(error => {
            console.log(error)
        })
}


const handlePictureCardPreview2 = (uploadFile: any) => {
    dialogImageUrl2.value = uploadFile.url!
    dialogVisible2.value = true
}
//添加
const Cjimg2 = (value: any) => {
    var AddCjImages = reactive({
        traceType: route.query.id,
        urlImg: value.data,
        imageType: 2
    })
    axios.post("Goods/AddImages", AddCjImages)
        .then(res => {
            if (res.data.code == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Getimages1();
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}
//企业信息
const Corsabled = ref(false)
const Cormodel = reactive({
    companyName: "",
    province: 0,
    city: 0,
    county: 0,
    foundingTime: Date,
    campanyIntro: "",
    campanyImage: "",
    batchId: route.query.productionLot,
    principal: "",
    quantity: 0,
    groups: 0,
    groupPrincipal: "",
    manufacturingLicense: route.query.manufacturingLicense,
    breedingPlant: "",
    factoryName: ""
})
const bickCor = () => {
    axios.get("Foot/BickCor?batchId=" + route.query.productionLot)
        .then(res => {
            Cormodel.breedingPlant = res.data.data.breedingPlant;
            Cormodel.factoryName = res.data.data.factoryName;
            Cormodel.quantity = res.data.data.quantity;
        })
}
const addCor = () => {
    axios.post("Foot/AddCor", Cormodel)
        .then(res => {
            if (res.data.data == 1) {
                ElMessage({
                    message: res.data.msg,
                    type: 'success',
                })
                Corsabled.value = false
                location.reload;
            }
            else {
                ElMessage.error(res.data.msg)
            }
        })
        .catch(error => {
            console.log(error)
        })
}


//狗子函数
onMounted(() => {
    //反填养殖
    getclu();
    //显示保健
    gethealth();
    //显示动检证
    Getimages1();
    //企业照片
    Getimages2();
    //企业信息反填
    bickCor();
})

</script>

<style>
/* 基本表格样式 */
Table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    /* border: 1px solid #ddd; */
    font-size: 16px;
}

/* 表头样式 */
th {
    background-color: #f2f2f2;
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

/* 单元格样式 */
td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
</style>